<template>
  <div class="work-navbar">
    <a
      v-for="item in navbars"
      :key="item.path"
      :class="{
        active: path.includes(item.path),
      }"
      @click="hanldeJumpPage(item.path)"
    >
      {{ item[lang] }}
    </a>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {}
  },
  computed: {
    ...mapState(['menus', 'lang']),
    path() {
      return this.$route.path
    },
    navbars() {
      return this.menus[3].children
    },
  },
  methods: {
    hanldeJumpPage(path) {
      if (this.$route.path.includes(path)) {
        return
      }
      this.$router.push({
        path,
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import '~assets/var';

.work-navbar {
  .pd(60, 0, 20, 0);

  border-bottom: 2px solid #ddd;

  a {
    .height(36);
    .lineH(36);
    .pd(0, 15, 0, 15);
    .mg(0, 15, 0, 0);
    .ft(16);

    display: inline-block;
    background: #fff;
    border-radius: 17px;
    color: #333;

    &.active {
      background: #0762cb;
      color: #fff;
    }
  }
}
</style>
